<template>
    <div id="double-line" ref="canvas" class="canvas" :style="{width: '100%', height: canHeight + 'px'}"></div>
</template>
<script setup lang="ts">
import { defineProps, computed, onMounted } from 'vue'
import { createPinia } from 'pinia'
import * as echarts from 'echarts/core';
import { GridComponent, 
    type GridComponentOption,
    LegendComponent,
  type LegendComponentOption
 } from 'echarts/components';
import { LineChart, type LineSeriesOption } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import { useChartsStore } from '@/stores/charts';
const pinia = createPinia();
const chartStore = useChartsStore(pinia)
echarts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition,LegendComponent]);

type EChartsOption = echarts.ComposeOption<
  GridComponentOption | LineSeriesOption | LegendComponentOption
>;
const props = defineProps({
    canvasHeight: {
        type:Number,
        default: 300
    },
    data: {
        type: Object,
        default: () => { } 
    }
})
let canHeight = computed(() => { return props.canvasHeight })
onMounted(() => {
    var chartDom = document.getElementById('double-line')!;
    var myChart = echarts.init(chartDom);
    var option: EChartsOption;

    option = {
        legend: {
            show: true,
            left: 'right',
            top: 10,
            textStyle: { color: '#11cb92' },
            data: ['白天', '晚上']
        },
        grid: {
            top: 40,
            left: '4%',
            right: '6%',
            bottom: 0,
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            axisLabel: { show: true, color: '#c3c6ce',
                formatter: function (value) { return chartStore.weekEnToCn[value]; }
            },
            data: props.data.xAxisDataList
        },
        yAxis: {
            type: 'value',
            axisLabel: { show: true, color: '#c3c6ce' },
            splitLine:{show: true, lineStyle:{color: '#19485d'}},
            axisLine: { show: true },
            axisTick: { show: true },
        },
        series: props.data.seriesDataList,
    };

    option && myChart.setOption(option);
})
</script>

<style scope>
</style>